<template>
	<view>
		<view class="waterfall-box h-flex-x h-flex-2">
			<view>
				<helang-waterfall 
					v-for="(item,index) in leftList" 
					:key="index" 
					:params="item" 
					tag="left"
					:index="index"
					@height="onHeight"
					@click="onClick(item)"
				></helang-waterfall>
			</view>
			<view>
				<helang-waterfall 
					v-for="(item,index) in rightList" 
					:key="index" 
					:params="item" 
					@height="onHeight"
					@click="onClick(item)"
					tag="right"
					:index="index"
				></helang-waterfall>
			</view>
		</view>
		<view class="load-txt">{{ajax.loadTxt}}</view>
	</view>
</template>

<script>
	import helangWaterfall from "@/uni_modules/helang-waterfall/components/helang-waterfall/helang-waterfall"
	export default {
		components: {
			"helang-waterfall": helangWaterfall
		},
		data() {
			return {
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: [],
				ajax: {
					// 是否可以加载
					load: true,
					// 加载中提示文字
					loadTxt: '',
					// 每页的请求条件
					offset:0,
					// 页码
					page:20,
					btmid: null,
				}
			}
		},
		onLoad() {
			uni.showLoading({
				title: '加载中'
			});
		},
		onReady() {
			this.getList(this.ajax.offset,this.ajax.page);
		},
		// 触底触发
		onReachBottom() {
			console.log("触底触发")
			this.getList(this.ajax.offset,this.ajax.page,this.ajax.btmid);
		},
		// 下拉刷新
		onPullDownRefresh(){
			console.log("下拉刷新")
			// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
			setTimeout(()=>{
				this.leftHeight = 0;
				this.rightHeight = 0;
				this.getList(this.ajax.offset,this.ajax.page,this.ajax.btmid);
			},800);
		},
		methods: {
			// 监听高度变化
			onHeight(height, tag) {
				if (tag == 'left') {
					this.leftHeight += height;
				} else {
					this.rightHeight += height;
				}
			},
			// 组件点击事件
			onClick(item){
				console.log(item.id)
				uni.navigateTo({
					url: "../../pages/NoteDeatil/NoteDeatil?id=" + item.id,
				});
			},
			// 获取数据
			getList(offset,page,btmid) {
				/* 
					无真实数据，当前由 setTimeout 模拟异步请求、
					自行替换 请求方法将数据 传入 addList() 方法中
					自行解决数据格式，自行修改组件内布局和内容绑定
				*/
			   console.log(111)
				if (!this.ajax.load) {
					return;
				}
				this.ajax.load = false;
				this.ajax.loadTxt = '加载中...';
				
				uni.request({
					url: (!btmid) ? `https://apis.netstart.cn/douguo/home/notes/${offset}/${page}`:`https://apis.netstart.cn/douguo/home/notes/${offset}/${page}?btmid=${btmid}`,
					success: (res1) => {
							let res = [];
							let lists = res1.data.result.list;
							this.ajax.btmid = res1.data.result.btmid;
							uni.hideLoading();
							// this.ajax.offset += 20;
							console.log(btmid);
							res = lists.map(function(item){
								if(item.note){
									return{
										url:item.note.image_u,
										title:item.note.title,
										authorUrl:item.note.author.p,
										authorN:item.note.author.n,
										id:item.note.id,
										mv:item.note.media_type,
									}
								}
							})
							this.addList(res);
					    },
					fail:(res2) => {
						console.log(btmid);
						console.log(res2.errMsg);
					}
				});
			},
			addList(res) {
				// 获取到的数据，请注意数据结构
				console.log(res);
				
				if(!res || res.length < 1){
					this.ajax.loadTxt = '没有更多了';
					return;
				}
			
				// 左右列表高度的差
				let differ = this.leftHeight - this.rightHeight;
				// 计算差值，用于确定优先插入那一边
				let differVal = 0;
								
				// 初始化左右列表的数据
				let i = differ > 0 ? 1 : 0;
				
				let [left, right] = [
					[],
					[]
				];
				
				
				// 获取插入的方向
				let getDirection = (index)=>{
					/* 左侧高度大于右侧超过 600px 时，则前3条数据都插入到右边 */
					if(differ>= 600 && index < 2){
						differVal = 1;
						return 'right';
					}
					
					/* 右侧高度大于左侧超过 600px 时，则前3条数据都插入到左边 */
					if(differ <= -600 && index < 2){
						differVal = -1;
						return 'left';
					}
					
					/* 左侧高度大于右侧超过 350px 时，则前2条数据都插入到右边 */
					if(differ >= 350 && index < 1){
						return 'right';
					}
					/* 右侧高度大于左侧超过 350px 时，则前2条数据都插入到左边 */
					if(differ <= -350 && index < 1){
						differVal = -1;
						return 'left';
					}
					
					/* 当前数据序号为偶数时，则插入到左边 */
					if ((i+differVal) % 2 == 0) {
						return 'left';
					} else {
						/* 当前数据序号为奇数时，则插入到右边 */
						return 'right';
					}
				}
				
				// 将数据源分为左右两个列表，容错差值请自行根据项目中的数据情况调节
				res.forEach((item, index) => {
					if(getDirection(index) == 'left'){
						// console.log(`差值：${differ},方向：left，序号${index}`)
						left.push(item);
					}else{
						// console.log(`差值：${differ},方向：right，序号${index}`)
						right.push(item);
					}
					i++;
				});
						console.log(left)
						console.log(right)
				
				// 将左右列表的数据插入，第一页时则覆盖
				if(this.ajax.offset == 0){
					this.leftList = left;
					this.rightList = right;
					uni.stopPullDownRefresh();
				}else{
					this.leftList = [...this.leftList, ...left];
					this.rightList = [...this.rightList, ...right];
				}

				this.ajax.load = true;
				this.ajax.loadTxt = '上拉加载更多';
				// this.ajax.page++;
				this.ajax.offset += 20;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}
</style>

<style lang="scss" scoped>
	.waterfall-box {
		padding: 20rpx 10rpx;
		box-sizing: border-box;

		>view {
			padding: 0 10rpx;
		}
	}

	.h-flex-x {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;

		&.h-flex-2 {
			>view {
				width: 50%;
			}
		}
	}
	
	.load-txt{
		padding: 0 0 20rpx 0;
		text-align: center;
		color: #999;
		font-size: 24rpx;
	}
</style>